<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
        <img class="swiper-img" :src=slide.imgUrl alt=''></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name:"HomeBanner",
    props: {
      list:Array
    },
    data () {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          /* pagination:'.swiper-pagination',
          loop:true */
        },
        swiperSlides: [{
          id:'0001',
          imgUrl:'https://imgs.qunarzz.com/sight/p0/1910/b7/b70a5d784789a39a3.img.jpg_710x360_78d254af.jpg'
        },{
          id:'0002',
          imgUrl:'https://imgs.qunarzz.com/sight/p0/1412/36/fc5094c9d8332145eefdafc6f59c8157.water.jpg_710x360_57ed1d05.jpg'
        },{
          id:'0003',
          imgUrl:'https://imgs.qunarzz.com/sight/p0/201405/27/27dc8cb5de11a8dc143b1e7d72625396.jpg_710x360_81d31286.jpg'
          //imgUrl:'@/assets/imgs/vue.png'        
        }]
      }
    },
    mounted() {
      /* setInterval(() => {
        console.log('simulate async data')
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000) */
    }
  }
</script>

<style lang='scss' scoped>
  .wrapper{
    overflow:hidden;
    width:100%;
    height :0;
    padding-bottom :50.25%
  }
    .swiper-img{
      width:100%
    }
</style>